<template>
    <button :class="btnClass" @click="handleClick">{{ btnName }}</button>
</template>
<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
    props: {
        btnName: {
            type: String,
            default: "按钮"
        }
    },
    setup(props, context) {
        const btnClass = ref('btn');
        const btnName = ref(`${props.btnName}`);

        const handleClick = () => {
            console.log("组件点击事件")
            context.emit("handleClick", handleClick);
        }
        return {
            btnClass,
            btnName,
            handleClick,
        }
    },
})
</script>
<style scoped>
.btn {
    background: #5121ff;
    color: #ffffff;
    cursor: pointer;
}

</style>